<template>
  <!-- zx 2021 7 21 -->
  <div>
    <el-card class="box-card">
      <!-- 按钮 -->
      <div class="but">
        <el-button
          @click="preview"
          size="medium"
          class="saveBtn"
        >预览</el-button>
        <el-button
          class="btn"
          size="medium"
          @click="savaDetails"
        >保存</el-button>
        <el-button
          @click="deselect"
          size="medium"
          class="saveBtn"
        >取消</el-button>
        <el-button
          @click="selectBtn"
          size="medium"
          type="danger"
          class="btndanger"
        >重置</el-button>
      </div>

      <div class="box">
        <!-- 顶部面包屑导航 -->

        <el-breadcrumb separator="/">
          <el-breadcrumb-item>资源配置</el-breadcrumb-item>
          <el-breadcrumb-item><a>详情页配置</a></el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 96px">
          <!-- 第二行 -->
          <div class="two">{{caption}}</div>
          <!-- 第三行 -->

          <div class="three">
            <div class="left">
              <el-input
                placeholder="请输入关键字进行过滤"
                v-model="filterText"
                suffix-icon="el-icon-search"
              >
              </el-input>
              <!-- <div class="img1">
            <img src="./search.png">
          </div> -->
              <el-tree
                class="filter-tree"
                :data="detailList"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
                highlight-current
                node-key="id"
                @node-click="handleNodeClick"
              >
              </el-tree>

            </div>
            <div class="right">
              <el-form
                ref="form"
                :model="formPega"
                label-width="120px"
                class="video3"
                label-position="left"
              >
                <el-form-item label="主标题：">
                  <el-input
                    maxlength="20"
                    show-word-limit
                    v-model="formPega.haeding"
                    :disabled="isInput"
                  ></el-input>
                </el-form-item>
                <el-form-item label="副标题：">
                  <el-input
                    resize='none'
                    maxlength="200"
                    show-word-limit
                    :rows="5"
                    type="textarea"
                    v-model="formPega.subhead"
                    :disabled="isInput"
                  ></el-input>
                </el-form-item>
                <el-form-item label="背景图片：">
                  <!-- <div class="head_img">
                <img
                  :src="img"
                  id="show"
                  v-show="begin"
                  class="video7"
                />


                <div
                  class="caption"
                  v-show="reveal"
                >
                  <input
                    id="file"
                    ref="imgs"
                    type="file"
                    accept="image/*"
                    class="video6"
                    @change="setting"
                  >
                </div>


                <div
                  class="close"
                  @click="closedBth"
                  v-show="begin"
                ></div>
              </div> -->
                  <!-- 删除 -->
                  <div
                    class="close"
                    @click="closedBth"
                    v-show="begin"
                  ></div>
                  <el-upload
                    class="avatar-uploader"
                    action="lei"
                    :show-file-list="false"
                    :http-request="addRequest"
                    :on-change="headleChange"
                    :disabled="authenStatusOne"
                    accept="image/*"
                  >
                    <img
                      v-if="img"
                      v-lazy="img"
                      class="avatar"
                    >
                    <div
                      class="caption"
                      v-show="reveal"
                    >
                      <img
                        src="../video/Icon／.png"
                        class="img6"
                      >
                      <!-- <div class="txt8"> 请上传logo</div> -->
                    </div>

                  </el-upload>
                  <div class="hint">支持JPG、PNG、GIF格式，不超过3MB</div>
                </el-form-item>
                <el-form-item label="详细内容：">
                  <!-- <el-tiptap
                v-model="formPega.content"
                :extensions="extensions"
                placeholder="输入页面内容"
                lang="zh"
              ></el-tiptap> -->
                  <productUEditor
                    @onProduDesc="getProductdesc"
                    ref="second"
                    :navigationId="navigationId"
                    :caption="caption"
                    v-show="ueditorDisable"
                  ></productUEditor>

                </el-form-item>

              </el-form>

            </div>
          </div>

        </div>
        <!-- 预览弹出层 -->
        <div
          class="four"
          v-show="fourshow"
        >
          <div
            class="shut"
            @click="fourBtn"
          ></div>
          <div
            class="up"
            v-show="previewShow"
          >
            <div class="txt1">{{formPega.haeding}}</div>
            <div class="txt2">{{formPega.subhead}}</div>
          </div>
          <img
            :src="img"
            class="middle"
            v-show="previewShow"
          >
        </div>
        <!-- 遮盖层 -->
        <div
          class="all"
          v-show="fourshow"
          @click="fourBtn"
        ></div>

      </div>

    </el-card>
  </div>
</template>
<script>
import {
  navigationList,
  submitDetail,
  inquireId,
  uploads,
  deleteDetail
} from '@/api/contact.js'
import axios from "axios";

import productUEditor from "../productUEditor/index.vue"
export default {
  components: {
    productUEditor,

  },
  data() {
    return {
      filterText: '',
      detailList: [],
      defaultProps: {
        children: 'parentList',
        label: 'name',
      },
      formPega: {
        haeding: "",
        subhead: "",
        content: ""
      },
      haeding1: "",
      subhead1: "",
      content1: "",
      img2: "",
      img: '',
      reveal: true,
      begin: false,
      value: '',
      editorOption: {
        placeholder: '',
        theme: 'snow',
        modules: {}
      },

      fourshow: false,
      previewShow: false,
      navigationId: "",
      text: "",
      caption: "",
      defaultMsg: "",
      ueditortxt: "",
      authenStatusOne: false,  //上传控件禁用
      ueditorDisable: true,   //富文本框消失
      isInput: false,  // input 禁止使用
      imgLast: "", //图片上次地址





    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },

  },
  mounted() {
    this.getDetailList()
  },
  methods: {
    // 树形节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 树形图节点点击
    handleNodeClick(data) {
      console.log(data);
      this.navigationId = data.id
      this.caption = data.name
      this.formPega.haeding = ''
      this.formPega.subhead = ''
      this.img = ''
      this.haeding1 = ''
      this.subhead1 = ''
      this.content1 = ''
      this.img2 = ''
      this.$refs.second.delectUeditor()
      this.reveal = true
      this.begin = false
      this.detailPage()
    },

    setting(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0]
      let URL = window.URL || window.webkitURL; // 获取当前域名地址

      this.img = URL.createObjectURL(file);   // 拼接 URL + file 并转成 blob地址
      this.begin = true
      this.reveal = false
      // this.$refs.imgs.type = 'text'
    },
    closedBth() {
      this.begin = false
      this.img = false
      this.reveal = true
      // this.$refs.imgs.type = 'file'
      this.authenStatusOne = false
    },

    // 文本框
    onEditorChange() {
      // console.log(this.value)
      this.text = this.value

    },

    // 弹出层
    fourBtn() {
      this.fourshow = false
      this.previewShow = false
    },
    preview() {
      this.fourshow = true
      this.previewShow = true
    },

    // 获取列导航列表数据

    async getDetailList() {
      const data = await navigationList()
      if (data.status == 200) {

        this.detailList = data.data.data
        // 获取导航栏后默认选中首页
        // 判断第一行导航是否是首页
        // if (this.detailList[0].id !== "6947dafe-0626-48d9-8776-572f022bfe84") {
        //   this.$nextTick(function () {
        //     this.$refs.tree.setCurrentKey(this.detailList[0].id);

        //   })
        //   this.caption = this.detailList[0].name
        //   this.navigationId = this.detailList[0].id
        //   this.detailPage()
        // } else if (this.detailList[0].id === "6947dafe-0626-48d9-8776-572f022bfe84") {
        //   this.$nextTick(function () {
        //     this.$refs.tree.setCurrentKey(this.detailList[1].id);

        //   })
        //   this.caption = this.detailList[1].name
        //   this.navigationId = this.detailList[1].id
        //   this.detailPage()
        // }
        // 判断导航栏第一个获取是否是首页默认导航栏
        this.$nextTick(function () {
          // 第一个不是首页就采用第一个
          if (this.detailList[0].id !== "6947dafe-0626-48d9-8776-572f022bfe84") {
            this.$refs.tree.setCurrentKey(this.detailList[0].id);
            this.caption = this.detailList[0].name
            this.navigationId = this.detailList[0].id
            this.detailPage()
            // 第一个是首页就采用第二个默认
          } else if (this.detailList[0].id === "6947dafe-0626-48d9-8776-572f022bfe84") {
            this.$refs.tree.setCurrentKey(this.detailList[1].id);
            this.caption = this.detailList[1].name
            this.navigationId = this.detailList[1].id
            this.detailPage()
          }
        })

      } else {
        this.$message.error(`获取列表失败`);

      }


    },
    // 根据id查询详情页
    detailPage() {
      inquireId({ menuId: this.navigationId }).then(res => {
        if (res.status == 200) {
          if (res.data.msg == "success") {
            // 获取当前id数据详情
            if (this.navigationId === "6947dafe-0626-48d9-8776-572f022bfe84") {
              this.ueditorDisable = false
              this.authenStatusOne = true
              this.isInput = true
              this.$message({
                showClose: true,
                message: '当前ID禁止上传数据！',
                type: 'warning'
              });
            } else {
              this.imgLast = ""
              let arr = Object.keys(res.data.data)
              this.ueditorDisable = true
              this.authenStatusOne = false
              this.isInput = false
              if (arr.length == "") {
                return
              } else {
                this.formPega.haeding = res.data.data.title
                this.formPega.subhead = res.data.data.subtitle
                this.img = res.data.data.bgImg
                this.haeding1 = res.data.data.title
                this.subhead1 = res.data.data.subtitle
                this.content1 = res.data.data.pcContent
                this.img2 = res.data.data.bgImg

                setTimeout(() => {
                  this.$refs.second.getUEditor()

                }, 3000);

                this.reveal = false
                this.begin = true
                this.authenStatusOne = true
              }
            }



          } else {
            this.$message.error(`获取${this.caption}页面失败`);
          }
        }

      })
    },
    // 富文本框的值
    getData() {
      this.$refs.second.getUEditor()
    },

    // 获取图片路径
    headleChange(file, fileList) {
      this.img = URL.createObjectURL(file.raw);
      this.reveal = false
      this.begin = true
      this.authenStatusOne = true
    },
    addRequest(item) {
      //验证图片格式大小信息
      const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png' ||
        item.file.type == 'image/gif';
      const isLt1M = item.file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG PNG格式!');
        this.imageLast()
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 3MB!');
        this.imageLast()
      }
      // return isJPG && isLt1M;
      //图片格式大小信息没问题 执行上传图片的方法
      if (isJPG && isLt1M == true) {
        const formData = new FormData();
        formData.append("files", item.file);
        formData.append("mediaType", "1");
        formData.append("categoryName", "导航栏")
        formData.append("tagNames", this.caption)
        uploads(formData).then(res => {
          // console.log(res);
          // 请求成功执行操作
          if (res.data.code === "10000") {
            let arrayImg = res.data.data
            arrayImg.map((item, index) => {
              this.img = item.url
              this.imgLast = item.url
              this.$message.success("图片地址获取成功")
              this.authenStatusOne = true
            })
          } else {
            this.$message.error("网络请求失败")
          }
        })
      }

    },

    // 图片加载失败，换上次地址
    imageLast() {
      if (this.imgLast) {
        this.img = this.imgLast
      } else {
        if (this.img2) {
          this.img = this.img2
        } else {
          this.img = ""
          this.reveal = true
          this.begin = false
          this.authenStatusOne = false
        }

      }
    },

    // 保存
    savaDetails() {
      if (this.navigationId.length == 0) {
        return this.$message.warning("请选择页面")
      }
      let e = {
        title: this.formPega.haeding,
        subtitle: this.formPega.subhead,
        id: this.navigationId,
        bgImg: this.img,
        pcContent: this.defaultMsg,

      }
      if (this.formPega.haeding !== "" && this.formPega.subhead !== "" && this.img !== "" && this.defaultMsg !== "") {
        submitDetail(e).then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.msg == "success") {
              this.$message.success(`保存${this.caption}成功`);
              this.$refs.second.delectUeditor()
              this.detailPage()
            } else {
              this.$message.error(`保存${this.caption}失败`);
            }
          }
        })
      } else {

        this.$message.error("所有内容都要填写");


      }
      // submitDetail(e).then(res => {
      //   // console.log(res);
      //   if (res.status == 200) {
      //     if (res.data.msg == "success") {
      //       this.$message.success(`保存${this.caption}成功`);
      //       this.$refs.second.delectUeditor()
      //       this.detailPage()
      //     } else {
      //       this.$message.error(`保存${this.caption}失败`);
      //     }
      //   }

      this.authenStatusOne = true
    },
    // 取消
    deselect() {
      if (this.haeding1) {
        this.formPega.haeding = this.haeding1
        this.formPega.subhead = this.subhead1
        this.img = this.img2
        // this.formPega.content = this.content1
        this.$refs.second.getUEditor()
        this.reveal = false
        this.begin = true
        // this.$refs.imgs.type s= 'file'
        this.authenStatusOne = true
      } else {
        this.formPega.haeding = ""
        this.formPega.subhead = ""
        this.img = ""
        this.$refs.second.delectUeditor()
        this.reveal = true
        this.begin = false
        this.authenStatusOne = false
      }



    },

    // 百度富文本框
    getProductdesc(desc) {

      this.defaultMsg = desc
    },

    // 删除详情页
    selectBtn() {
      let obj = {
        ids: [this.navigationId]
      }
      this.$confirm('此操作将清空该页所有数据, 是否继续?', '重置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteDetail(obj).then(res => {
          if (res.data.code === "10000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.formPega.haeding = ''
            this.formPega.subhead = ''
            this.img = ''
            this.haeding1 = ''
            this.subhead1 = ''
            this.content1 = ''
            this.img2 = ''
            this.$refs.second.delectUeditor()
            this.reveal = true
            this.begin = false
            this.authenStatusOne = false
          } else {
            this.$message.error("删除失败!");
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },


  }



}
</script>
<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
.box {
  overflow: auto;
}
// 搜索哦框图标
/deep/ .el-input__icon {
  margin-top: -3px;
}
.box-card {
  position: relative;
  margin-top: 80px;
  margin-left: 24px;
  padding-right: 24px;
  margin-right: 24px;
  // overflow: auto;
  /deep/.el-card__body {
    padding: 0px;
    width: 100%;
  }
  .el-breadcrumb {
    // margin-left: 24px;
    // margin-top: 18px;
    font-size: 20px;
    // line-height: 29px;
    // height: 29px;
    position: absolute;
    top: 22px;
    left: 24px;
  }
  .but {
    // width: 352px;
    // margin-top: 0px;
    // margin-left: 1056px;
    position: absolute;
    float: left;
    right: 24px;
    height: 32px;
    margin: 0;
    top: 46px;
    /deep/ .el-button {
      margin-right: 16px;
      margin-left: 0;
      height: 32px;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 32px;
    }
    .btndanger {
      color: #fff;
      border: 1px solid #f56c6c;
      margin-right: 0px;
      margin-left: 0;
      height: 32px;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 32px;
    }
  }
}

/deep/.el-card__body {
  padding: 0 !important;
}

.btn {
  background-color: #004fe0;
  color: #fff;
  border: 1px solid #004fe0;
}

.el-tiptap-editor {
  width: 600px;
  height: 350px;
}

.two {
  font-size: 20px;
  font-weight: 700;
  margin-top: 18px;
  text-align: left;
  padding-left: 24px;
  height: 28px;
}
.three {
  display: flex;
  margin-top: 30px;
  .left {
    padding-left: 24px;
    position: relative;
    /deep/ .el-input__inner {
      height: 32px;
      width: 278px;
    }
    /deep/ .el-input__inner:focus {
      border-color: #2672ed;
      box-shadow: 0 0 0 2px rgb(197, 208, 238);
    }
    .img1 {
      z-index: 5;
      position: absolute;
      top: 5px;
      left: 278px;
      width: 15px;
      height: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right {
    margin-left: 150px;
  }
  .el-textarea {
    width: 600px;
  }
  .hint {
    user-select: none;
    position: absolute;
    color: #b7b7b7;
    font-size: 14px;
    height: 0;
    bottom: 15px;
  }
  .head_img {
    width: 600px;
    height: 186px;
    border: 1px solid #dcdfe6;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video7 {
    width: 100%;
    height: 100%;
  }
  .video6 {
    width: 70px;
    height: 70px;
    opacity: 0;
  }

  .close {
    width: 40px;
    height: 40px;
    z-index: 8;
    background: url("../video/icon.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: -20px;
    left: 580px;
  }
}
.four {
  z-index: 9999;
  width: 1152px;
  height: 360px;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // margin-top: -360px; /* 高度的一半 */
  // margin-left: -705px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border: 1px solid #dcdfe6;
  .shut {
    z-index: 23;
    width: 50px;
    height: 50px;
    background: url("../video/icon.png") no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: -35px;
    left: 1117px;
  }
  .up {
    position: absolute;
    top: 138px;
    left: 216px;
    .txt1 {
      color: #fff;
      font-size: 28.8px;
    }
    .txt2 {
      color: #fff;
      width: 700px;
      font-size: 14.4px;
      margin-top: 14px;
    }
  }
  .middle {
    width: 100%;
    height: 100%;
  }
}
.all {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.el-tree {
  z-index: 10;
  margin-top: 24px;
  font-size: 14px;
  height: 920px;
  overflow-y: auto;
}
/* 树形导航点击是的颜色和背景图 */
/deep/.el-tree-node:focus > .el-tree-node__content {
  background-color: #fff;
  // color: #004fe0;
}
/* 树形导航点击是的颜色和背景图 (点击其他地方仍保留选中状态) */
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #e7ebf0;
  color: #004fe0;
}
/deep/.avatar-uploader .el-upload {
  background: #f2f2f2;
  width: 600px;
  height: 186px;
  border: 1px solid #dcdfe6;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  line-height: 186px;
  background: #f2f2f2;
  width: 600px;
  height: 186px;
  text-align: center;
}
.avatar {
  width: 600px;
  height: 186px;
  display: block;
}
.caption {
  display: flex;
  position: absolute;
  top: 69px;
  left: 265px;
  .img6 {
    width: 48px;
    height: 48px;
  }
  .txt8 {
    margin-left: 12px;
    font-size: 14px;
  }
}
.saveBtn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 32px;
  color: #004fe0;
  border: 1px solid #004fe0;
}
</style>